import React, { useEffect } from 'react'
import { Modal, Form, Input, Select, Radio, DatePicker, InputNumber } from 'antd'
import style from './EditModal.module.less'
import moment from 'moment'
import { strToNum } from '@src/assets/js/tool'

const { Option } = Select
const { TextArea } = Input
const { Item, useForm } = Form

function Main ({ visible, hide, data, majors, caseTypeOptions, typeOptions, callback }) {
  const [formRef] = useForm()
  useEffect(() => {
    if (visible && data && formRef) {
      const o = { ...data }
      o.birthday = strToNum(o.birthday)
      o.first_appoint_datetime = strToNum(o.first_appoint_datetime)
      if (o.birthday) {
        o.birthday = moment(o.birthday * 1000)
      }
      if (o.first_appoint_datetime) {
        o.first_appoint_datetime = moment(o.first_appoint_datetime * 1000)
      }
      formRef.setFieldsValue(o)
    }
  }, [visible, data, formRef])
  return (
    <Modal
      title='修改仲裁员'
      destroyOnClose
      open={visible}
      onOk={() => formRef.submit()}
      onCancel={hide}
      okText='确定'
      cancelText='取消'
      width='800px'
      maskClosable={false}
      forceRender
    >
      <Form form={formRef} labelCol={{ flex: '154px' }} name='arbitrator-detail' onFinish={d => callback(d)}>
        <Item noStyle name='id'><span /></Item>
        <Item name='name' label='名称'>
          <Input placeholder='请输入' />
        </Item>
        <Item name='native_place' label='籍贯'>
          <Input placeholder='请输入' />
        </Item>
        <Item name='political' label='政治面貌'>
          <Input placeholder='请输入' />
        </Item>
        <Item name='birthday' label='出生日期'>
          <DatePicker placeholder='请选择' picker='month' format='YYYY-MM-DD' className={style.full} />
        </Item>
        <Item name='license_type' label='证件类型'>
          <Select placeholder='请选择证件类型'>
            <Option value='身份证'>身份证</Option>
            <Option value='护照'>护照</Option>
            <Option value='其他'>其他</Option>
          </Select>
        </Item>
        <Item name='license' label='证件号'>
          <Input placeholder='请输入证件号' />
        </Item>
        <Item name='mobile' label='手机号码'>
          <Input placeholder='手机号不能为空' />
        </Item>
        <Item name='educational' label='学历'>
          <Select placeholder='请选择'>
            <Option value='专科'>专科</Option>
            <Option value='本科'>本科</Option>
            <Option value='硕士研究生'>硕士研究生</Option>
            <Option value='博士研究生'>博士研究生</Option>
          </Select>
        </Item>
        <Item name='professional' label='专业'>
          <Select placeholder='请选择专业' mode='multiple'>
            {
              majors.map(li => <Option key={li} value={li}>{li}</Option>)
            }
          </Select>
        </Item>
        <Item name='university' label='毕业院校'>
          <Input placeholder='请输入' />
        </Item>
        <Item name='special' label='擅长领域'>
          <Input placeholder='请输入' />
        </Item>
        <Item name='foreign_case_in' label='擅长涉外'>
          <Radio.Group>
            <Radio value={1}>是</Radio>
            <Radio value={0}>否</Radio>
          </Radio.Group>
        </Item>
        <Item name='occupation' label='职业分类'>
          <Select placeholder='请选择'>
            {typeOptions.map((li, i) => <Option key={i} value={li}>{li}</Option>)}
          </Select>
        </Item>
        <Item name='structure' label='所在单位'>
          <Input placeholder='请输入' />
        </Item>
        <Item name='structure_log' label='曾任/兼任单位(近 3年)'>
          <Input placeholder='请输入' />
        </Item>
        <Item name='caseon_info' label='办理案件情况'>
          <Select placeholder='请选择办理案件情况' mode='multiple'>
            {caseTypeOptions.map((li, i) => <Option key={i} value={li.title}>{li.title}</Option>)}
          </Select>
        </Item>
        <Item name='caseontime_preyear' label='期望年办案数'>
          <InputNumber placeholder='请输入' min={0} className={style.full} />
        </Item>
        <Item name='retire' label='工作状况'>
          <Radio.Group>
            <Radio value={1}>在职</Radio>
            <Radio value={0}>非在职</Radio>
          </Radio.Group>
        </Item>
        <Item name='residence_address' label='居住地'>
          <Input placeholder='请输入' />
        </Item>
        <Item name='first_appoint_datetime' label='初任仲裁员时间'>
          <DatePicker placeholder='请选择' className={style.full} />
        </Item>
        <Item name='qualification' label='担任仲裁员资格'>
          <Input placeholder='请输入' />
        </Item>
        <Item name='email' label='Email'>
          <Input placeholder='请输入' />
        </Item>
        <Item name='tel' label='固定电话'>
          <Input placeholder='请输入' />
        </Item>
        <Item name='address' label='联系地址'>
          <Input placeholder='请输入' />
        </Item>
        <Item name='gender' label='性别'>
          <Radio.Group>
            <Radio value='男'>男</Radio>
            <Radio value='女'>女</Radio>
          </Radio.Group>
        </Item>
        <Item name='remark' label='备注'>
          <TextArea placeholder='请输入' rows={3} />
        </Item>
      </Form>
    </Modal>
  )
}

export default Main
